import React, { useEffect } from "react"
import useInput from "../hooks/useInput"
import "../index.scss"
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
// import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { useDispatch, useSelector } from "react-redux"


export default function Home () {
  const dispatch = useDispatch()
  const websiteReducer = useSelector(state => state.websiteReducer)
  const newtitle = useInput("")
  const newurl = useInput("")
  const [open, setOpen] = React.useState(false)
  useEffect(() => {
    dispatch({
      type: "loadWebsites"
    })
  }, [])
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleAdd = () => {
    dispatch({
      type:"addWebsite",
      website: {
        title: newtitle.input.value,
        url: newurl.input.value,
      }
    })
    newtitle.setValue("")
    newurl.setValue("")
    setOpen(false);
  };

  const handleClose = () => {
    setOpen(false);
  };
  return (
    <>
      <div id="content">
        <div className="home-page" id="logo" style={{}}>
          <img src="http://img.wujiang-group.cn/roch-google.png" alt="" />
        </div>
        <div id="inputWrapper">
          <input id="input" type="search" autoComplete="off" spellCheck="false" placeholder="在 Google 上搜索，或者输入一个网址" aria-live="polite" /><ntp-realbox-icon id="icon" in-searchbox background-image mask-image="search.svg"><svg t={1626274205678} className="icon-search" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id={2200} width="18px" height="18px">
              <path d="M875.264 855.872l-188.032-215.552C737.664 579.392 768 501.248 768 416 768 221.632 610.368 64 416 64 221.568 64 64 221.632 64 416S221.568 768 416 768c72.32 0 139.52-21.888 195.392-59.264l186.88 214.272c18.496 21.312 50.88 23.36 72 4.928C891.648 909.376 893.76 877.12 875.264 855.872zM160 416c0-141.184 114.816-256 256-256 141.184 0 256 114.816 256 256s-114.816 256-256 256C274.816 672 160 557.184 160 416z" p-id={2201} /></svg></ntp-realbox-icon>
          <button id="voiceSearchButton" title="语音搜索">
            <svg t={1626275178477} className="icon-voice" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id={12403} data-spm-anchor-id="a313x.7781069.0.i7" width="18px" height="18px">
              <path d="M512 736a224 224 0 0 0 224-224V224A224 224 0 0 0 288 224v288a224 224 0 0 0 224 224zM352 224a160 160 0 0 1 320 0v288a160 160 0 0 1-320 0z m512 288a32 32 0 0 0-64 0 288 288 0 1 1-576 0 32 32 0 0 0-64 0 352 352 0 0 0 320 350.4V960h-96a32 32 0 1 0 0 64h256a32 32 0 1 0 0-64h-96v-97.6A352 352 0 0 0 864 512z" fill="#1296db" p-id={12404} data-spm-anchor-id="a313x.7781069.0.i8" />
              <path d="M576 128a144 144 0 0 1 144 144v288a144 144 0 0 1-288 0v-288A144 144 0 0 1 576 128z" fill="#1296db" opacity=".2" p-id={12405} data-spm-anchor-id="a313x.7781069.0.i6" />
            </svg>
          </button>
          <ntp-realbox-dropdown id="matches" role="listbox" hidden />
        </div>
        <div id="container" >
        <Lists
          websites={websiteReducer.websites}
        ></Lists>

          <dom-repeat id="tiles" style={{display: 'none'}}><template></template></dom-repeat>
          <Button id="addShortcut" tabIndex={0} noink="true" aria-disabled="false" role="button" onClick={handleClickOpen}>
            <div className="tile-icon">
                <div id="addShortcutIcon" draggable="false" style={{height: 15}}>
                  <svg t={1626603057374} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id={2039} width={15} height={15}>
                    <path d="M552.021333 32c7.082667 0 10.666667 3.584 10.666667 10.666667l-0.085333 418.645333h397.397333c7.082667 0 10.666667 3.584 10.666667 10.666667v80.042666c0 7.082667-3.584 10.666667-10.666667 10.666667l-397.397333-0.085333V981.333333c0 7.082667-3.413333 10.666667-10.581334 10.666667H471.893333c-7.082667 0-10.666667-3.584-10.666666-10.666667V562.602667H64c-7.082667 0-10.666667-3.413333-10.666667-10.581334V471.893333c0-7.082667 3.584-10.666667 10.666667-10.666666h397.312V42.666667c0-7.082667 3.584-10.666667 10.666667-10.666667h80.042666z" fill="#000000" fillOpacity=".65" p-id={2040} />
                  </svg>
                </div>
              </div>
              <div className="tile-title"><span>添加快捷方式</span></div>
          </Button>
          <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">添加快捷方式</DialogTitle>
            <DialogContent>
              <TextField
                margin="dense"
                id="name"
                label="名称"
                fullWidth
                {...newtitle.input}
              />
              <TextField
                margin="dense"
                id="url"
                label="网址"
                fullWidth
                {...newurl.input}
              />
            </DialogContent>
            <DialogActions>
              <Button onClick={handleClose} color="primary">
                取消
              </Button>
              <Button onClick={handleAdd} color="primary">
                完成
              </Button>
            </DialogActions>
          </Dialog>
        </div>
      </div>
    </>
  )
}


function Lists({ websites }) {
    return websites.map(node => (
      <a
      className="tile"
      key={node.id}
      title={node.title}
      href={node.url}
      >
        <div className="tile-icon">
          <img draggable="false" src={`${node.url}/favicon.ico`} alt="" />
          <div className="query-tile-icon" draggable="false" hidden />
        </div>
        <div className="tile-title title-ltr">
          <span>{node.title}</span>
        </div>
      </a>
    ))
}